<template>
<transition>
  <div class="ticketing">
    <div class="tab">
      <div class="tab-line">
        <div v-for="(item, index) in tabList" :key="index" class="tab-item" @click="clickTab(index)">
          <img :src="index === selectedTab ? item.selectedImg : item.defaultImg" />
          <p>{{ item.label }}</p>
        </div>
      </div>
      <div class="tab-dot" :style="{left: tabDotLeft + 'px'}"></div>
    </div>

    <slider v-model="selectedTab" :list="tabList" :showDot="false" :autoPlay="false" :loop="false">
      <!-- 火车票 -->
      <train style="height: calc(100vh - 112px)"></train>
      <!-- 飞机票 -->
      <plane style="height: calc(100vh - 112px)"></plane>
      <!-- 汽车票 -->
      <car style="height: calc(100vh - 112px)"></car>
    </slider>
  </div>
</transition>
</template>

<script>
import Slider from '@/components/slider/slider'
import Train from './ticketIngTab/train'
import Plane from './ticketIngTab/plane'
import Car from './ticketIngTab/car'

export default {
  name: 'Ticketing',
  data() {
    return {
      tabList: [
        {
          label: '火车票',
          defaultImg: '/static/img/icon/jingdian.png',
          selectedImg: '/static/img/icon/jiudian.png'
        },
        {
          label: '飞机票',
          defaultImg: '/static/img/icon/jingdian.png',
          selectedImg: '/static/img/icon/jiudian.png'
        },
        {
          label: '汽车票',
          defaultImg: '/static/img/icon/jingdian.png',
          selectedImg: '/static/img/icon/jiudian.png'
        }
      ],
      selectedTab: 0
    }
  },
  created () {
    this.selectedTab = parseInt(this.$route.params.type)
  },
  components: {
    Slider, Train, Plane, Car
  },
  computed: {
    tabDotLeft () {
      return (window.innerWidth / this.tabList.length) * (this.selectedTab + 0.5) - 14
    }
  },
  methods: {
    clickTab (index) {
      this.selectedTab = index
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'

.ticketing
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  background-color $color-background
  z-index 101
  .tab
    padding-top 35px
    padding-bottom 12px
    background $color-theme
    position relative
    .tab-line
      display flex
      justify-content space-around
      color #fff
      text-align center
      font-size $font-size-title
      .tab-item
        width 33.33%
        img
          width 45px
          height 45px
        p
          margin-top -5px
    .tab-dot
      width 0
      height 0
      border-left 14px solid transparent
      border-right 14px solid transparent
      border-bottom 9px solid #fff
      position absolute
      bottom -1px
      left 60px
      transition all .3s
</style>
